<!-- 资讯首页 -->
<template>
  <div class="page-view">
    <van-pull-refresh
      v-model="refreshLoading"
      @refresh="onRefresh"
    >
      <form action="/">
        <van-search
          v-model="searchValue"
          placeholder="请输入文档标题"
          show-action="true"
          @search="onSearch"
          @focus="onFocus"
          @cancel="onCancel"
          @blur="onBlur"
        >
          <div
            slot="left-icon"
          >
            <img
              src="~assets/class/search-icon.png"
              class="search-icon"
            >
          </div>
        </van-search>
      </form>
      <van-tabs
        :line-width="5"
        :line-height="5"
        color="#04CABC"
        title-active-color="#04CABC"
        @click="tabClick"
      >
        <van-tab
          v-for="item in industryList"
          :key="item.IndustryId"
          :title="item.IndustryName"
        >
          <!-- 资讯分类 -->
          <template v-if="!isSearch">
            <div
              v-if="materialList.length > 0"
              class="news-list"
            >
              <van-list
                v-model="moreLoading"
                finished-text="— 没有更多了 —"
                :finished="moreFinished"
                :immediate-check="false"
                :offset="10"
                @load="onLoadMoreData"
              >
                <div
                  v-for="(material, index) in materialList"
                  :key="material.MaterialId"
                  class="material-list-ul-li"
                >
                  <div
                    class="material-title"
                    title="news.Title"
                  >
                    {{ material.Title }}
                  </div>
                  <div
                    class="material-center"
                  >
                    <div class="material-tag">
                      {{ material.Tag }}
                    </div>
                    <div
                      class="material-dowmload"
                      @click="onClickDowmload(material, index)"
                    >
                      下载
                    </div>
                  </div>
                  <div class="material-bottom">
                    <div class="material-time">
                      {{ material.UpdateTime }}
                    </div>
                    <div class="material-count">
                      下载：{{ material.DownloadCount }}次
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
            <div
              v-else
              class="no-data"
            >
              <NoData>没有您搜索的资料</NoData>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { AppInfo } from 'lib/appMethods'
import { SET_USER_INFO } from '@/store/mutations'
import { HTTP_CODES } from '@/plugins/http.plugin'
import { Search, PullRefresh } from 'vant'
export default Vue.extend({
  components: {
    'van-search': Search,
    'van-pull-refresh': PullRefresh,
    NoData: () => import('components/Class/NoData.vue'),
  },
  data () {
    return {
      searchValue: '',
      curMaterial: {
        Path: '',
      },
      materialList: [{}],
      curIndustryId: 0,
      curIndustry: {
        IndustryId: 0,
        IndustryName: '',
        CategoryList: [],
      },
      industryList: [{
        IndustryId: 0,
        IndustryName: '',
        CategoryList: [],
      }],
      currentPage: 1,
      sumPage: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
      isSearch: false,
    }
  },

  created () {
    this.getIndustryList()
    this.materialIndexList()
  },

  methods: {
    onRefresh () {
      this.currentPage = 1
      setTimeout(() => {
        // 下拉刷新
        this.materialIndexList()
        this.$toast('刷新成功')
      }, 1500)
    },

    onLoadMoreData () {
      if (this.currentPage < this.sumPage) {
        this.currentPage++
        this.materialIndexList()
      }
    },

    getIndustryList () {
      this.$axios({
        method: 'get',
        url: 'Training/GetIndustryAndCategoryListForH5',
        data: {
          Token: '-1',
        },
      }, 0, () => {
        this.getIndustryList()
      }).then(res => {
        let list = res.IndustryList
        list.unshift({
          IndustryId: 0,
          IndustryName: '全部',
          CategoryList: [],
        })
        this.$set(this.$data, 'industryList', list)
      })
    },

    materialIndexList () {
      this.$axios({
        url: 'Material/GetDownloadList',
        data: {
          IndustryId: this.curIndustryId,
          Title: this.searchValue,
          Page: this.currentPage,
          PageSize: 10,
        },
      }, 0, () => {
        this.materialIndexList()
      }).then(res => {
        this.$set(this.$data, 'sumPage', res.SumPage)
        if (this.currentPage === 1) {
          this.$set(this.$data, 'materialList', res.DownloadList)
        } else {
          this.$set(this.$data, 'materialList',
            [...this.materialList, ...res.DownloadList])
        }
        this.refreshLoading = false
        this.moreLoading = false

        if (this.currentPage >= this.sumPage) {
          this.moreFinished = true
        } else {
          this.moreFinished = false
        }
      })
    },

    tabClick (value: any) {
      this.currentPage = 1
      this.curIndustry = this.industryList[value]
      this.curIndustryId = this.curIndustry.IndustryId
      this.materialIndexList()
    },

    onClickDowmload (material: any, index: number) {
      AppInfo.callMethod('showMaterial', { pdfUrl: material.Path })

      material.DownloadCount++
      this.materialList.splice(index, 1, material)
      this.$set(this.$data, 'materialList', this.materialList)

      this.updateDownloadCount(material.MaterialId)
    },

    updateDownloadCount (materialId: number) {
      this.$axios({
        url: 'Material/UpdateDownloadCount',
        data: {
          MaterialId: materialId,
        },
      }, 0, () => {
        this.updateDownloadCount(materialId)
      }).then(res => {

      })
    },

    onSearch (value: any) {
      this.searchValue = value
      this.currentPage = 1
      this.materialIndexList()
    },

    onFocus () {
      this.$set(this.$data, 'isSearch', true)
    },
    onBlur () {
      this.$set(this.$data, 'isSearch', false)
    },
    onCancel () {
      this.$set(this.$data, 'isSearch', false)
    },
  },
})
</script>
<style lang="scss" scoped>
  @import "~scss/news/news.scss";

.no-data {
  text-align: center;
  margin-top: 240px;
}
.search-icon {
  width: 32px;
  vertical-align: text-bottom;
}
.material-list-ul-li {
  padding: 20px 0;
  @include px1border(bottom, #F1F1F1);
}

.material-title {
  font-size: 30px;
  width: 85%;
  word-wrap:break-word;
  color: #4B515E;
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 控制多行的行数
    -webkit-box-orient: vertical;
}
.material-center {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}
.material-tag {
  padding: 0 20px;
  background: #E3EAF8;
  font-size: 20px;
  color: #5F8FEE;
  line-height: 40px;
}
.material-dowmload {
  background: #04CABC;
  font-size: 26px;
  color: #FFFFFF;
  width: 130px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
}
.material-bottom {
  display: flex;
  font-size: 24px;
  color: #888888;
}
.material-count {
  margin-left: 200px;
}
</style>
